<template>
<div class="box">
    <div class="left"></div>
  <div class="right">
    <div>
      <h4 class="biao">热门活动</h4>
      
    </div>
    <ul>
      <li class="li_1">
        <div>
          <icon
            type=""
            :size="23"
            color="red"
          />
          <div class="hot">热门</div>
        </div>
        <div>金职的疫情防控实战演练，很硬核！</div>
      </li>
      <li class="li_2">
        <div>
          <icon
            type=""
            :size="23"
            color=""
          />
          <div>热门</div>
        </div>
        <text>你好，新金职人</text>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style scoped>
.box{
  display: flex;
}
.left{
  width: 80%;
}
.right{
  border: 1px solid gray;
  width: 20%;
  text-align: left;
}
.biao{
  border-bottom:1px solid gray ;
}
.hot{
  color: red;
  width: 40%;
}
.li_1{
  display: flex;
}
.li_2{
  display: flex;
}
</style>
